import React from "react";
import "./roomitem.css";
import { roomItemTypes } from "@/types/roomType";

const RoomItem: React.FC<roomItemTypes> = (props) => {
  const setRoomId = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    props.click(e.currentTarget.dataset.id);
  };
  return (
    <div
      className={"room-item"}
      data-id={props.room_id}
      onClick={(e) => setRoomId(e)}
    >
      <div className={"room-img"}>
        <img src={"http://localhost:8000" + props.room_pic} alt="" />
      </div>
      <div className={"room-info"}>
        <span className={"room-title"}>{props.room_title}</span>
        <span className={"room-desc"}>{props.room_info}</span>
      </div>
    </div>
  );
};
export default RoomItem;
